<template>
  <div class="Resume_div">
    <el-row class="Resume_row_top">
      <el-col :span="7">
        <div>
          <el-button size="mini" class="el-icon-plus" @click="go" type="success">新增</el-button>
          <el-button size="mini" @click="dialogFormVisible = true" class="el-icon-search" type="primary">高级搜索
          </el-button>
          <el-dialog title="高级搜索" :visible.sync="dialogFormVisible">
            <el-form class="List_form" :model="form1">
              <el-row>
                <el-col :span="2">
                  <br>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="类型">
                    <el-select class="Edit_select" v-model="form.TypeID">
                      <option value=""></option>
                      <option value="0">测试数据</option>
                      <option value="1">测试数据</option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="状态">
                    <el-select class="Edit_select" v-model="form.StatusID">
                      <option value=""></option>
                      <option value="0">测试数据</option>
                      <option value="1">测试数据</option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <br>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <br>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="姓名">
                    <el-input style="width: 220px;" v-model="form.FullName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="录入人">
                    <el-input style="width: 220px;" v-model="form.UserFullName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <br>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <br>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="档期">
                    <el-date-picker class="Edit_date" v-model="form.StartDate" type="date" placeholder="选择日期">
                    </el-date-picker>~
                    <el-date-picker class="Edit_date" v-model="form.EndDate" type="date" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <br>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>

          <el-button style="margin-left:7px;" size="mini" class="el-icon-document-delete" type="success">导入</el-button>
          <el-button size="mini" class="el-icon-folder-opened">导出</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div><br /></div>
      </el-col>
      <el-col :span="5">
        <div>
          <el-input class="Resume_row_top_input" prefix-icon="el-icon-search" placeholder="请输入内容"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-table :data="tableData" border>
      <el-table-column prop="TypeID" label="类型" width="75"></el-table-column>
      <el-table-column prop="FullName" label="姓名" width="75"></el-table-column>
      <el-table-column prop="ImagePath" label="照片" width="75"></el-table-column>
      <el-table-column prop="Age" label="年龄" width="75"></el-table-column>
      <el-table-column prop="AnimalSign" label="属相" width="75"></el-table-column>
      <el-table-column prop="Province" label="户籍" width="75"></el-table-column>
      <el-table-column prop="Years" label="工作年限" width="100"></el-table-column>
      <el-table-column prop="Tags1" label="有效签证" width="100"></el-table-column>
      <el-table-column prop="Tags" label="工作类型" width="100"></el-table-column>
      <el-table-column prop="UserFullName" label="录入人" width="100"></el-table-column>
      <el-table-column prop="Birthday" label="出生日期" width="100"></el-table-column>
      <!--EndDate-->
      <el-table-column label="档期" width="200">
        <template slot-scope="scope">
          <div>
            <span>{{scope.row.StartDate}}~{{scope.row.EndDate}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Description" label="备注" width="100%"></el-table-column>
      <el-table-column prop="StatusID" label="状态" width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template>
          <el-button size="mini" type="primary">修改</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="Resume_row_paging">
      <el-col :span="5">
        <div><span>共1条|每页共20条|共1页</span></div>
      </el-col>
      <el-col :span="12">
        <div><br /></div>
      </el-col>
      <el-col :span="7">
        <div class="Resume_row_paging_col">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.Resume_div {
  background-color: #ecf0f5;
}
.List_form input {
  width: 200px;
}
.Resume_row_top {
  height: 45px;
  margin-left: 10px;
}
.Resume_row_top button {
  margin-top: 9px;
}
.Resume_row_top_input {
  margin-top: 3px;
}
.Resume_row_paging {
  background-color: #fafafa;
}
.Resume_row_paging_col {
  float: right;
}
</style>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          TypeID: "类型",
          FullName: "姓名",
          ImagePath: "照片",
          Age: "年龄",
          AnimalSign: "属相",
          Province: "户籍",
          Years: "工作年限",
          Tags1: "有效签证",
          Tags: "工作类型",
          UserFullName: "录入人",
          Birthday: "出生日期",
          StartDate: "开始档期",
          EndDate: "结束档期",
          Description: "备注",
          StatusID: "状态"
        }
      ],
      dialogFormVisible: false,
      form: {
        TypeID: '',
        StatusID: '',
        FullName: '',
        UserFullName: "",
        StartDate: '2020/2/2',
        EndDate: '2020/2/3'
      }
    };
  },
  methods: {
    go () {
      this.$router.push('/Resume/Edit')
    }
  }
};
</script>
